<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="first">
                <span slot="label">系统通知<el-badge :value="unread.announce" class="item"></el-badge></span>
                <el-table
                        :data="announceList"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="messageAnnounce.createTime"
                            label="发送时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="messageAnnounce.type"
                            label="类型"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="messageAnnounce.content"
                            label="内容" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            width="120">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 0 ? 'success' : 'info'">
                                {{scope.row.status == 0 ? '未读' : '已读'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="showAnnounceDialog(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="width: 40%; display:flex; align-items:center; margin-top: 10px">
                    <el-button type="primary" size="small" @click="firstPage('announce')">首页</el-button>
                    <el-button type="primary" size="small" @click="prePage('announce')">上一页</el-button>
                    <span style="padding-left: 10px;padding-right: 10px">当前页 {{this.queryAnnounce.page}}</span>
                    <el-button type="primary" size="small" @click="nextPage('announce')">下一页</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane name="second">
                <span slot="label">消息提醒<el-badge :value="unread.remind" class="item"></el-badge></span>
                <el-table
                        :data="remindList"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="createTime"
                            label="发送时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="senderName"
                            label="发送人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="senderAction"
                            label="动作"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="objectType"
                            label="内容类型"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="object"
                            label="内容" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            width="120">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 0 ? 'success' : 'info'">
                                {{scope.row.status == 0 ? '未读' : '已读'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="showRemindDialog(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="width: 40%; display: flex;align-items:center; margin-top: 10px">
                    <el-button type="primary" size="small" @click="firstPage('remind')">首页</el-button>
                    <el-button type="primary" size="small" @click="prePage('remind')">上一页</el-button>
                    <span style="padding-left: 10px;padding-right: 10px">当前页 {{this.queryRemind.page}}</span>
                    <el-button type="primary" size="small" @click="nextPage('remind')">下一页</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="消息内容" :visible.sync="announceDialog" @close="initAnnounceList">
            <el-descriptions class="margin-top" :column="1">
                <el-descriptions-item label="类型">{{announce.type}}</el-descriptions-item>
                <el-descriptions-item label="内容">{{announce.content}}</el-descriptions-item>
                <el-descriptions-item label="发送时间">{{announce.createTime}}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="announceDialog = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="消息内容" :visible.sync="remindDialog" @close="initRemindList">
            <el-descriptions class="margin-top" :column="1">
                <el-descriptions-item label="发送人">{{remind.senderName}}</el-descriptions-item>
                <el-descriptions-item label="动作">{{remind.senderAction}}</el-descriptions-item>
                <el-descriptions-item label="内容类型">{{remind.objectType}}</el-descriptions-item>
                <el-descriptions-item label="内容">{{remind.object}}</el-descriptions-item>
                <el-descriptions-item label="发送时间">{{remind.createTime}}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="remindDialog = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { getUnreadAnnounceCount, getAnnounceList, getAnnounce, getUnreadRemindCount, getRemindList, getRemind } from '@/api/message/message'
export default {
  name: "Notice",
  components: {

  },
  data() {
    return {
      activeName: 'first',
      unread: {
        announce: 0,
        remind: 0
      },
      announceList: [],
      queryAnnounce: {
        page: 1
      },
      announceDialog: false,
      announce: {},
      remindList: [],
      queryRemind: {
        page: 1
      },
      remindDialog: false,
      remind: {}
    }
  },
  created() {
    this.initAnnounceList()
    this.initRemindList()
  },
  computed: {},
  methods: {
    handleClick(tab, event) {
    },
    initAnnounceList() {
      // 查询未读消息条数
      getUnreadAnnounceCount().then(resp => {
        if (resp) {
          this.unread.announce = resp.data
        }
      })
      getAnnounceList(this.queryAnnounce).then(resp => {
        if (resp) {
          console.log(resp)
          this.announceList = resp.data
        }
      })
    },
    showAnnounceDialog(item) {
      console.log(item)
      const data = {
        id: parseInt(item.id),
        announceId: item.messageAnnounce.id,
        status: item.status
      }
      getAnnounce(data).then(resp => {
        if (resp) {
          this.announce = resp.data
          this.announceDialog = true
        }
      })
    },
    initRemindList() {
      // 查询未读消息条数
      getUnreadRemindCount().then(resp => {
        if (resp) {
          this.unread.remind = resp.data
        }
      })
      getRemindList(this.queryRemind).then(resp => {
        if (resp) {
          this.remindList = resp.data
        }
      })
    },
    showRemindDialog(item) {
      console.log(item)
      const data = {
        id: item.id,
        status: item.status
      }
      getRemind(data).then(resp => {
        if (resp) {
          console.log(resp)
          this.remind = resp.data
          this.remindDialog = true
        }
      })
    },
    firstPage(type) {
      if (type === 'announce') {
        this.queryAnnounce.page = 1
        this.initAnnounceList()
      } else if (type === 'remind') {
        this.queryRemind.page = 1
        this.initRemindList()
      }
    },
    nextPage(type) {
      if (type === 'announce') {
        if (this.announceList.length === 20) {
          this.queryAnnounce.page = this.queryAnnounce.page + 1
          this.initAnnounceList()
        } else {
          this.$message('没有下一页')
        }
      } else if (type === 'remind') {
        if (this.remindList.length === 20) {
          this.queryRemind.page = this.queryRemind.page + 1
          this.initRemindList()
        } else {
          this.$message('没有下一页')
        }
      }
    },
    prePage(type) {
      if (type === 'announce') {
        if (this.queryAnnounce.page > 1) {
          this.queryAnnounce.page = this.queryAnnounce.page - 1
          this.initAnnounceList()
        } else {
          this.$message('没有上一页')
        }
      }
      if (type === 'remind') {
        if (this.queryRemind.page > 1) {
          this.queryRemind.page = this.queryRemind.page - 1
          this.initRemindList()
        } else {
          this.$message('没有上一页')
        }
      }
    }
  }
}
</script>
<style>

</style>
